<template>
	<view id="home">
		<view class="search">
			<view class="search-search">
				<image src="../../static/sao.png"></image>
				<view><image style="margin-left: 100upx;" src="../../static/com.png"></image ><input @click="search()" type="text" placeholder='请输入...'/></view>
				<image src="../../static/xin.png"></image>
			</view>
		</view>
		<view class="home_nav">
			<view class="nav_top">
				<view class="home_swiper">
					<swiper :autoplay="true" class="swiper">
						<swiper-item v-for='(item,index) in adver' :key='index'>
							<view>
								<view class="swiperColor" :style="{background:item.color}"></view>
							</view>
							<view class="swiperImgUrl">
								<image :src="item.imgUrl"></image>
							</view>
							<view class="swiper-dots">
								<view class="num">{{index+1}}/3</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="home_section">
			<view v-for='(item,index) in adverc' :key='index'>
				<text class="section_item">
					<image :src="item.imgUrl"></image>
					<text>{{item.title}}</text>
				</text>
			</view>
		</view>
		<view class="home_top">
			<view class="top_content">
				<image src="../../static/temp/h1.png"></image>
				<view class="top_left">
					<text>橱窗推荐</text>
					<view>Shop Window</view>
				</view>
			</view>
			<view class="top_bottom">
				<view class="tops_contents">
					<scroll-view :scroll-x="true" class="scroll">
						<view class="content">
							<view class="plate" v-for="(item,index) in homeData.windowRecommend" :key="index" @click="plateImg(item.spuId)">
								<view class="details" v-if="index%2 !=0">
									<view class="title_clamp">{{item.spuTitle}}</view>
									<view>
										<text class="spuPrice">￥{{item.spuPrice/100}}</text>
										<text class="spuOriginalPrice">{{item.spuOriginalPrice/100}}</text>
									</view>
									<view class="market">累计销售{{item.spuSales}}件</view>
								</view>
								<image :src="item.spuImg" mode="" class="imgs"></image>
								<view class="details" v-if="index%2 !=1">
									<view class="title_clamp">{{item.spuTitle}}</view>
									<view>
										<text class="spuPrice">￥{{item.spuPrice/100}}</text>
										<text class="spuOriginalPrice">{{item.spuOriginalPrice/100}}</text>
									</view>
									<view class="market">累计销售{{item.spuSales}}件</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view>
			<view class="top_content">
				<image src="../../static/temp/h1.png"></image>
				<view class="top_left">
					<text>分类精选</text>
					<view>Competitive Products For You</view>
				</view>
			</view>
		</view>
		<view class="topSales">
			<view v-for='(item,index) in adverb' :key='index' class="alesImg">
				<view class="floor-img-box">
					<view class="floor-img">
						<image :src="item.imgUrl"></image>
					</view>
				</view>
				<view v-for='(items,index) in item.data' :key='index' class="floor-list">
					<view class="uni-scroll-view">
						<view class="scoll-wrapper" @click="wrapperImg(items.id)">
							<view>
								<image :src="items.img"></image>
							</view>
							<view class="">
								<view class="scollText">{{items.title}}</view>
								<view class="price">￥{{items.price/100}}</view>
							</view>
						</view>
						<view class="more">
							<view class="moreTxst">
								<view>查看全部</view>
								<view>More+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="top_content">
				<image src="../../static/temp/h1.png"></image>
				<view class="top_left">
					<text>热销宝贝</text>
					<view>Hot Sale</view>
				</view>
			</view>
		</view>
		<view class="guess_section">
			<view class="guess_item" v-for="(item,index) in homeData.salesTop" @click="guessImg(item.id)">
				<view class="image_wrapper">
					<image :src="item.img"></image>
				</view>
				<view class="guess_bottom">
					<view class="">{{item.title}}</view>
					<view class="guess_bottomText">￥{{item.price/100}}</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				homeData: [],
				adver:[],
				adverb:[],
				adverc:[]
			}
		},
		// onLoad() {
		// },
		methods: {
			plateImg(e){
				console.log(e)
				uni.navigateTo({
					url:'../detail/index?id='+e
				})
			},
			guessImg(e){
				uni.navigateTo({
					url:'../detail/index?id='+e
				})
			},
			wrapperImg(e){
				uni.navigateTo({
					url:'../detail/index?id='+e
				})
			},
			slideshow() {
				uni.request({
					url:this.$C.webUrl+'m.api?_gp=integral&_mt=getIndexData', //仅为示例，并非真实接口地址。
					success: (res) => {
						console.log(res)
						     this.homeData = res.data.data
						     this.adver=this.homeData.advertisement.t1
							 this.adverb=this.homeData.advertisement.t2
							 this.adverc=this.homeData.advertisement.t4
					}
				})
				// async register(data) {
				//     let [err, res] = await this.$http.git('m.api?_gp=integral&_mt=getIndexData', {
				// 				//    //请求账号密码登录接口
				// 				// password: this.password,
				// 				// userName: this.mobile
				// 			});
				// // 这里是错误的回调，如果请求的接口错误，或者需要自定义返回的日志，可以在这里处理
				// 			if (!this.$http.errorCheck(err, res)) return;
				// 			if (res.data.errmsg == '成功') {
				// 				//这里这里是成功的回调
				// 			}
				// 			console.log(res)
				// }
			},
			search(){
				uni.navigateTo({
					url:'../search/index'
				})
			}
		},
		mounted() {
			this.slideshow()
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
	}
	.search{
		width: 100%;
		height: 60upx;
		position: absolute;
		top: 0upx;
	}
	.search-search{
		position: absolute;
		top: 15upx;
		z-index: 9999;
		width: 100%;
		line-height: 100upx;
		display: flex;
		justify-content: space-around;
	}
	.search-search view{
		width: 70%;
		height: 60upx;
		display: flex;
		background: #ECECEC;
		border-radius: 30upx;
	}
	.search-search image{
		width: 50upx;
		height: 50upx;
	}
	.guess_bottom{
		width: 100%;
		height: 23%;
		margin-left: 30upx;
	}
	.guess_bottomText{
		color: #fa436a;
	}
	.guess_bottom view{
	    font-size: 30upx;
		width: 300upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*让文本强制在一行不换行*/
		text-overflow: ellipsis;
	}
	.swiper {
		width: 100%;
		height: 500upx;
	}

	/*  */
	.home_section {
		width: 100%;
		font-size: 20upx;
		display: flex;
		justify-content: space-around;
	}

	.home_section view {
		font-size: 25upx;
		display:inline-block;
		text-align: center;
	}

	.home_section image {
		width: 90upx;
		height: 90upx;
		text-align: center;
		display:block;
	}

	.section_item {
		width: 100%;
		margin: auto;
	}

	.swiperColor {
		width: 100%;
		height: 400upx;
		position: relative;
	}
	.swiperImgUrl image {
		padding: 0upx 50upx;
		height: 360upx;
		width: 86%;
		z-index: 9999;
		margin: 0 auto;
		position: absolute;
		top: 90upx;
	}

	/*  */
	.swiper-dots {
		position: absolute;
		left: 50px;
		bottom: 50px;
		width: 39px;
		height: 30px;
		z-index: 9999 !important;
	}

	.num {
		width: 18px;
		height: 18px;
		border-radius: 50px;
		font-size: 12px;
		color: #fff;
		text-align: center;
		line-height: 18px;
	}

	/*  */
	.content {
		width: 100%;
	}

	.scroll {
		width: 100%;
		height: 500rpx;
		white-space: nowrap;
		overflow-x: scroll !important; 
		white-space: nowrap !important;
	}

	.plate {
		width: 50%;
		height: 80%;
		background: #FFFFFF;
		display: inline-block;
		/* padding-left: 25rpx; */
	}

	.imgs {
		width: 100%;
		height: 350rpx;
	}

	.home_top {
		width: 100%;
		margin: 20upx 20upx;
	}

	.tops_contents {
		width: 100%;
		display: flex;
	}
	.tops_content {
		width: 100%;
		display: flex;
	}

	.top_content {
		width: 100%;
		display: flex;
		font-size: 30upx;
		line-height: 50upx;
	}

	.top_content image {
		width: 100upx;
		height: 100upx;
	}


	.tops_left image {
		width: 50%;
		height: 400upx;
	}

	.title_clamp {
		font-size: 30upx;
		width: 200upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*让文本强制在一行不换行*/
		text-overflow: ellipsis;
		/*显示省略号来代表被修剪的文本*/
	}

	.market {
		font-size: 25upx;
	}

	.spuPrice {
		font-size: 30upx;
		color: #fa436a;
	}

	.spuOriginalPrice {
		font-size: 25upx;
		color: #CCCCCC;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	/*  */
	.topSales {
		width: 100%;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.alesImg {
		width: 99%;
		height: 80%;
	}

	.alesImg image {
		width: 100%;
		height: 200upx;
	}

	.floor-img-box {
		width: 100%;
		height: 400upx;
		position: relative;
	}

	.floor-img {
		width: 100%;
		height: 100%;
	}

	.floor-img image {

		height: 80%;
	}

	.floor-list {
		white-space: nowrap;
		padding: 10px;
		padding-right: 25px;
		border-radius: 3px;
		margin-top: -70px;
		margin-left: 15px;
		background: #fff;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
		position: relative;
		z-index: 1;
		margin-bottom: 20upx;
	}

	.uni-scroll-view {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.scoll-wrapper {
		width: 200upx;

	}

	.scollText {
		font-size: 30upx;
		width: 200upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*让文本强制在一行不换行*/
		text-overflow: ellipsis;
		/*显示省略号来代表被修剪的文本*/
	}

	.price {
		color: #fa436a;
		font-size: 30upx;
	}

	.more {
		display: flex;
		flex-shrink: 0;
		width: 90px;
		height: 90px;
		border-radius: 3px;
		background: #f3f3f3;
		font-size: 14px;
		color: #909399;
	}

	.moreTxst {

		margin: auto;
	}

	/*  */
	.guess_section {
		/* padding: 0 15px; */
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 1600upx;
		background: #fff;

	}

	.guess_section .guess_item {
		width: 50%;
		height: 25%;
		/* flex-direction: column; */
		/* width: 48%; */
		/* padding-bottom: 20px; */
		/* display: flex !important; */
	}

	.image_wrapper {
		width: 100%;
		height: 77%;
	}

	.guess_content {
		width: 48%;

	}

	.image_wrapper image {
		width: 100%;
		height: 100%;
	}
</style>
